//绑定微信的页面
<template>
    <div class="changephone">
        <hb-title-levels :list="list"
            pathType="child" />
        <hb-box :title="Lang.changeemail[lang][2]">
            <div class="Box">
                <div class="FormCon">
                    <div class="Label"
                        v-text="Lang.changeemail[lang][3]" />
                    <hb-input @ipt="e_input"
                        formType="base"
                        back="wechat" />
						<div>
							<span class='selecrcode' v-text="Lang.changeemail[lang][6]">选择支付二维码</span>
							<div class="ant cur">
						
                        		<div class="uploadPos"  @click="e_uploadant">
                            		<img class="uploadAntImg" ref="antImg" src="../addImg.png" alt="">
                        		</div>
                    		</div>
 							<input @change="antchange($event)" type="file" id="antimg" class="hidden" ref="antimg">

						</div>
					
                    <div class="signupbtn cur"
                        @click="e_api"
                        v-text="Lang.changeemail[lang][5]" />
                </div>
            </div>

        </hb-box>
        <hb-dialog @clk="e_clearMsg"
            v-if="msg !== ''">
            <span v-text="msg">23333</span>
        </hb-dialog>
    </div>
</template>

<script>
import {imgpost, vlink} from '@api'
import Lang from './lang.js'
export default {
	name: 'changephone',
	data() {
		return {
			Lang,
			form: {
				checkRe: false,
				inputed: '',
			},
			msg: '',
		}
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
		list() {
			return [
				{path: 'selfset', txt: Lang.changeemail[this.$store.state.setting.lang][0]},
				{path: 'changephone', txt: Lang.changeemail[this.$store.state.setting.lang][1]},
			]
		},
	},
	methods: {
		e_back_() {
			this.$router.push('/selfset')
		},
		e_input(checkRe, inputed, back) {
			this.form = {
				checkRe,
				inputed,
			}
		},

		async e_api() {
			if (!this.form.checkRe) {
				return
			}

			var param = new FormData()
			param.append('fid', this.$store.state.user.uid)
			param.append('accountNumber', this.form.inputed)
			param.append('type', 2)
			param.append('codeImg', this.antUrl)

			await imgpost(vlink.user.bindWechat, param).then(re => {
				this.msg = re.data.msg
				if (re.data.status === '1') {
					setTimeout(() => {
						this.$router.push('/selfset')
					}, 1200)
				}
				this.e_clearMsg()
			})
		},
		e_clearMsg() {
			setTimeout(() => {
				this.msg = ''
			}, 1200)
		},

		e_uploadant() {
			document.getElementById('antimg').click()
		},
		// 监听身份证反面上传
		antchange(el) {
			let target = el.target
			this.antUrl = el.target.files[0]
			this.$refs.antImg.src = this.getFileUrl(el.srcElement)
		},
		getFileUrl(obj) {
			let url
			url = window.URL.createObjectURL(obj.files.item(0))
			return url
		},
	},
}
</script>

<style scoped>
.hbTitle {
	margin-bottom: 20px;
}
.Box {
	display: flex;
	justify-content: center;
}
.FormCon {
	width: 525px;
	/* height: 318px; */
}
.Label {
	margin-top: 30px;
	margin-bottom: 5px;
	color: #61688a;
	font-size: 12px;
}
.signupbtn {
	height: 48px;
	margin-top: 30px;
	margin-bottom: 40px;
	background-color: #7a98f7;
	border-radius: 4px;
	text-align: center;
	line-height: 48px;
	font-size: 16px;
	color: #fff;
}
.signupbtn:hover {
	background-color: #a0b6f9;
}

.uploadPos {
	width: 100%;
	height: 100%;
	position: relative;
}
.ant {
	width: 60px;
	height: 60px;
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: #1e2235;
	text-align: center;
	line-height: 60px;
	color: #c7cce6;
	border: 1px dashed #c7cce6;
}

.uploadAntImg {
	width: 100%;
	height: 100%;
}
.delete {
	width: 20px;
	height: 20px;
	background-color: #7a98f7;
	position: absolute;
	right: 0;
	background: #fff;
	opacity: 0.6;
}
.antmask {
	background: #fff;
}
.hidden {
	display: none;
}
.selecrcode{
	color: #4d5680;
	font-size: 12px;
}
</style>
